<script>
import NavbarToggler from "../components/NavbarToggleButton.vue";
import FloatBtn from "../components/FloatBtn.vue";
import SideRecommend from "../components/SideRecommend.vue";
import VideoTree from "../components/VideoTree.vue";
import GradeGauge from "../components/GradeGauge.vue"
import Progress from '../components/Progress.vue'
import Exam from "../components/Exam.vue";
import ElTree from "../components/ElTree.vue";
import RingGauge from "../components/RingGauge.vue";
import diversityVideoList from "../assets/json/diversityVideoList.json";
import {baseURL, resourceURL} from "../axiosConfig";

export default {
  props: {
    target: {
      type: [String, Number],
      default: '',
      description: "Button target element"
    },
    toggled: {
      type: Boolean,
      default: false,
      description: "Whether button is toggled"
    }
  },
  components: {
    SideRecommend,
    FloatBtn,
    NavbarToggler,
    VideoTree,
    Exam,
    RingGauge,
    GradeGauge,
    Progress,
    ElTree
  },
  methods: {
    getSvgImage(description) {
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    },
    handleUrlClicked(url) {
      // 处理接收到的 URL 参数
      this.clickedUrl = url;
      // 更新动态key
      this.dynamicKey = Math.random(10000);
      console.log("点击的url: " + this.clickedUrl);
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goBack() {
      console.log('go back');
      window.location.href = baseURL+':81/#/detail/course/1/';
    },
    gotoZhi() {
      console.log('go back');
      window.location.href = baseURL+':81/#/detail/course/p/13';
    }

  },
  mounted() {
    const zhangjie = this.$route.params.zhangjie;
    const shipin = this.$route.params.shipin;
    // 现在你可以使用id来获取父组件传递的参数
    console.log("url: " + zhangjie + shipin);

    this.videoListHeight = this.$refs.videoPlayer.offsetHeight;

    // 当组件挂载时，从 localStorage 读取 userId
    this.userId = localStorage.getItem('userId') || 123456;

    this.clickedUrl = resourceURL +'/video/' + zhangjie + '/' + shipin
  },
  computed: {
    // 使用计算属性来动态计算掌握的百分比
    masteredPercent() {
      return (this.mastered / (this.mastered + this.notMastered) * 100).toFixed(1);
    },

    // 使用计算属性来动态计算正确率
    correctPercent() {
      return this.correct / (this.correct + this.wrong) * 100;
    },
  },
  data() {
    return {
      zhangjie:'',
      shipin:'',
      userId: 123456,
      variable: '',
      clickedUrl: '', // 保存点击视频节点的url
      dynamicKey: '', // 视频播放器key
      videoListHeight: 0,// 视频列表容器高度
      activeName: 'third',

      javaListData: diversityVideoList,

      docItems: [
        {
          id: 1,
          img: this.getSvgImage("Python U1 教案"),
          title: "Python U1 教案"
        },
        {
          id: 2,
          img: this.getSvgImage("Python U1 PPT"),
          title: "Python U1 PPT"
        },
        {
          id: 3,
          img: this.getSvgImage("Python U1 代码实例"),
          title: "Python U1 代码实例"
        },
        // 添加更多的项
      ],
      /**
      * 已掌握的题数
      */
      active: 0,
      mastered: 15,
      /**
       * 未掌握的题数
       */
      notMastered: 13,
      /**
       * 正确的题数
       */
      correct: 45,
      /**
       * 错误的题数
       */
      wrong: 15,

      drawer: false,//抽屉
      //treeData
      getNodeData(data) {
        console.log('data:', data)
      },
    }
  }
};

</script>

<template>

  <div>
    <!-- <el-page-header @back="goBack" content="返回课程">
    </el-page-header> -->
    <float-btn/>
    <div class="row">
      <div class="col-12">
        <card>
          <div class="row">
            <span class="deco" style="float: left;"></span>
            <h2 class="clearMargin" style="float: left;">面向对象程序设计</h2>
          </div>
        </card>
      </div>
      <div class="col-12" ref="parentContainer" style="display: flex;">
        <card style="padding: 1rem; flex: 1;margin-top: 1%;">
          <div class="row" style="height: 100%;">
            <div class="col-md-8" style="display: flex; flex-direction: column;">
              <div class="video-container">
                <video ref="videoPlayer" :key="dynamicKey" controls autoplay="autoplay" width="100%" height="100%">
                  <source :src="clickedUrl" type="video/mp4">
                </video>
              </div>
            </div>
            <div class="col-md-4" ref="videoListContainer"
                 style="max-height: 100%; overflow: auto;scrollbar-width: thin">
              <!--              <base-button class="animation-on-hover" style="float: right;margin-right: 15px;" type="info"-->
              <!--                           @click="gotoZhi">知链导航-->
              <!--              </base-button>-->
              <h2 style="margin-bottom: 0">视频选集</h2>
              <video-tree :list-data="javaListData" style="height: 550px;width: 100%;overflow:auto; "

                          @url-clicked="handleUrlClicked">
              </video-tree>
            </div>
          </div>
        </card>
      </div>
    </div>
  </div>
</template>

<style scoped>
ul {
  padding-left: 1rem;
}

#list {
  list-style: none;
  line-height: 2rem;
  width: 399px;

  :hover {
    color: #2a80cc;
  }

  :focus {
    color: #219df8;
  }
}

a {
  color: #1e1e24;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 62.39%;
  /* 视频宽高比 */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#center {
  text-align: center;
}


.custom-tree-height {
  height: 200px;
  /* 设置你需要的高度 */
  overflow-y: auto;
  /* 如果需要滚动条 */
}

.el-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 95px;
}
</style>
<style>
.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}

.clearMargin {
  margin-bottom: 0.5rem;
}
</style>
